import {designComponent} from "plain-design-composition";
import React from "react";
import './micro-navigation.less'
import {MicroNavigationHead} from "@/micro/nav/components/MicroNavigationHead";
import {nav} from "@/micro/nav/nav";
import {MicroNavigatorTab} from "@/micro/nav/components/MicroNavigatorTab";
import {NavigatorRouteType} from "plain-micro-application";
import {useSingleApplicationRender} from "@/micro/nav/components/useSingleApplicationRender";

export const MicroNavigation = designComponent({
    setup() {

        const fullPage = [
            NavigatorRouteType.public,
            NavigatorRouteType.private,
            NavigatorRouteType.page,
        ].indexOf(nav.initialState.config.routeType) > -1
        const {renderSingleCasePage} = useSingleApplicationRender()

        return () => (
            <div className={'micro-navigation'}>
                {!fullPage && (<MicroNavigationHead/>)}
                <div className="micro-navigation-body" style={{paddingTop: fullPage ? 0 : ''}}>
                    {nav.state.tabs.map((tab) => (
                        !tab.init ? null : (!!tab.pages[0] && <MicroNavigatorTab key={tab.pages[0].id + tab.id} tab={tab}/>)
                    ))}
                    {renderSingleCasePage()}
                </div>
            </div>
        )
    },
})